#ionic 4 authentication with authguard tutorialionic 4 authentication with authguard example

[i4technolab]

Here are the steps to create an Ionic application using Authguard, it is very common and acquired by most of the real world and many Ionic Mobile Application Development Companies

Open visual studio code and then open terminal in it.

Write command like “ionic start Demo —tabs”

Open the recently made application in visual studio code.

Type command like “ionic serve”. So it will run our application into our system’s default browser.

If you want to run out application in simulators, then there will be command like “ionic cordova run ios”.

To create login page there will be command like “ionic g page login”.

So the routing of login will be created at “app-routing.module.ts” file.

Now we want to restrict our user to access our main tab bar pages without authorization token. For that, we will create new module related to the core module with the command like “ionic g m core”.

We have to create Authguard via this command like “ionic g guard core/auth”. It will generate the guard in core folder.

Then create an activate method that will be used to make a route for tabs or login as per the authorization token which we have obtained at the time of login.

Now install the storage plugin for ionic 4, that will be used to store the token.

Import our ionic storage module in “app.module.ts” file.

Inject storage from Ionic storage module in auth guard file which is used for validation of authorization token.

We will do same business logic which can activate method that if we got the token then we have to navigate to our tabs screens otherwise move the user to login screens.

Now use same activate method in “app-routing.module.ts” file to prevent user to navigate to tabs screen with the guard file with the code like “canActivate: [AuthGuard]”.

Create some login page to add email and password things for the user with the reactive forms

So for that we have to import reactive forms module in “login.module.ts”

Do some validation for email and password as in-built validation provided in angular reactive forms?

Do some business logic like if our form is valid then store our authorization token into local storage and navigate to the tabs screen.

If we want to make some custom service that will handle our toast messages, then create toast service in our core folder with the command like “ionic g s core/toast”

Now import toast controller into toast service file and add method to present our dynamic toast messages.

Now we want to use toast service in the login screen so we have to import our toast service in “login.module.ts” file in “providers” array.

If you want to change any theme color of login page then we can easily change from “variables.scss” file.

Now all things are set and we have to run our application with command as described in step 4 or 5.

Now if we want to add Android platform then just write command like “ionic cordova platform add android”

After successfully adding platform, just run the command like “ionic cordova run android --device”. So it will run our app into android device

Now first it will display a login screen and we have to login with our credentials and if our form is valid then app will redirect to tabs screen.At last router will redirect to login page.

At last router will redirect to login page.